<template>

  <div class="header">
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color=" grey"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1" style="width:100px ; text-align: center;">简介首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">求助网址</template>
          <el-menu-item index="2-1"><a href="https://www.ele.me" target="_blank">vip求助</a></el-menu-item>
          <el-menu-item index="2-2"><a href="https://www.ele.me" target="_blank">svip求助</a></el-menu-item>
          <el-menu-item index="2-3"><a href="https://www.ele.me" target="_blank">ssvip求助</a></el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">土豪能力</template>
            <el-menu-item index="2-4-3">私人保镖</el-menu-item>
            <el-menu-item index="2-4-2">雇拥军团</el-menu-item>
            <el-menu-item index="2-4-1">同城代打</el-menu-item>
          </el-submenu>
        </el-submenu><el-menu-item index=""><a href="https://www.ele.me" target="_blank">前线疫情</a></el-menu-item>
        <el-menu-item index="4" disabled style=" text-align: center; float:right">求救电话10086 </el-menu-item>
        
      </el-menu>

    <div class="header1">
      <span> 新型冠状病毒</span>
      <a
        class="tubiao"
        href="https://baike.baidu.com/yidian/introduction"
        target="_self"
        data-visited="off"
        style="
          background-image: url('https://expertimg.cdn.bcebos.com/yidian%2Flogo_3.png');
        "
      ></a>
      <div class="header2">
        又名：新冠肺炎 、 Novel Coronavirus Pneumonia、NCP、Corona Virus Disease
        2019，COVID-19
        <br />
        <br />
        科室: 传染科、发热门诊
        <br />
        <br />
        中国著名专家:
      </div>
      <div class="ys1">
        <img
          src="https://medical-kg.cdn.bcebos.com/med-cms/image/image_16027317255630d6d90e.jpg"
          style="width: 40px; height: 40px; border-radius: 50%"
        />
        <div class="ysn0">
          <span class="ysn1"> 广西科技大学-主治医生 <br />张益达 </span>

          <span class="ysn2"> 专业大师</span>
          <span class="ysn3" style="width: 80px"
            >医疗专家团
            <span class="ysn4"></span>
          </span>
        </div>
      </div>

      <div class="ys2">
        <img
          src="https://medical-kg.cdn.bcebos.com/med-cms/image/image_16027317255630d6d90e.jpg"
          style="width: 40px; height: 40px; border-radius: 50%"
        />
        <div class="qysn0">
          <span class="qysn1"> 中国老年大学-主治医生 <br />李云龙 </span>

          <span class="qysn2"> 审阅大师</span>
          <span class="qysn3" style="width: 80px"
            >医疗专家团
            <span class="qysn4"></span>
          </span>
        </div>
      </div>
    </div>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div>
      <span class="jj"> 新冠病毒简介 </span>
      <br />
      <br />
      <br />

      <div style="width: 500px; margin-left: 50px; text-indent: 30px">
        新型冠状病毒肺炎是一种急性感染性肺炎，其病原体是一种先前未在人类中发现的新型冠状病毒，即2019新型冠状病毒。2020年2月7日，国家卫健委决定将“新型冠状病毒感染的肺炎”暂命名为“新型冠状病毒肺炎”，简称“新冠肺炎”。2月11日，世界卫生组织（WHO）将其英文名称为Corona
        Virus Disease
        2019（COVID-19）。2月22日，国家卫健委决定将“新型冠状病毒肺炎”英文名称修订为“COVID-19”，与世界卫生组织命名保持一致，中文名称保持不变。

        <br />
        <br /><el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in 6" :key="item">
            <h3 class="medium"></h3>
          </el-carousel-item>
        </el-carousel>
        <br>
        <br>
        <span class="zz">新冠病毒的特性</span>
        <br>
        <br>
       
      </div>
      <el-collapse  style="width:500px;margin-left:50px; ">
  <el-collapse-item title="传染性强"  name="1"  >
    <div>传染性强传染性强传染性强传染性强传染性强传染性强传染性强传染性强；</div>
    <div>传染性强传染性强传染性强传染性强传染性强传染性强传染性强传染性强</div>
  </el-collapse-item>
  <el-collapse-item title="潜伏期长" name="2">
    <div>潜伏期长潜伏期长潜伏期长潜伏期长潜伏期长潜伏期长潜伏期长潜伏期长潜伏期长；</div>
    <div>潜伏期长潜伏期长潜伏期长潜伏期长潜伏期长潜伏期长潜伏期长潜伏期长。</div>
  </el-collapse-item>
  <el-collapse-item title="容易并发其它症状" name="3">
    <div>66666666666666666666666</div>
    <div>6666666666666666666666666666666666666</div>
    
  </el-collapse-item>
  <el-collapse-item title="可控 " name="4">
    <div>6666666666666666666666666666666666666666666666666666666；</div>
    <div>66666666666666666666666666666666666666666666666666666666</div>
  </el-collapse-item>
</el-collapse>


<div class="xg" >
  <div class="xgz " >
  
  <div style="margin-left:160px;"> <img  src="https://dss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch11/png/症状new.png" class="c-img-img">
 <img  src="https://dss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch11/png/症状new.png" class="c-img-img">
 <img  src="https://dss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch11/png/症状new.png" class="c-img-img"></div>
  <h1 class="xgnr2">典型症状  </h1>
  <br>
  

  <ul style=" font-size:20px; list-style: none;">
    <el-tag style="font-size:20px ;font-family:楷体; 
              ; letter-spacing:6px;
                 "
  v-for="tag in tags"
  :key="tag.name"
 
  :type="tag.type">
  {{tag.name}}
</el-tag>
        <li><br></li>
    <li>
      1.以发热、乏力、干咳为主要表现</li>
    <br>
    <li>2.少数患者伴有鼻塞、流涕、咽痛和腹泻等症状；</li>
    <br>
    <li>3.重症患者多在发病一周后出现呼吸困难和/或低氧血症，严重者快速进展为急性呼吸窘迫综合征、脓毒症休克、难以纠正的代谢性酸中毒和凝血功能障碍及多器官功能衰竭。</li>
     <br>
    <li>4.病情加重，可出现呼吸急促、大汗、周身无力等症状，还会合并其他组织和器官系统的损害，出现严重并发症，因此新冠病毒症状有多种多样，但主要还是以呼吸道症状为主要表现。</li>
    <br>
    <li>5.......</li>
  </ul>
  </div>
  <div class="xgy">
     
     <span style="font-size:50px; font-family:楷体;color:blueviolet;">相关阅读</span>
     <br>
      
       <br>
     <div><ul style="  list-style:none ;">
       <li style="font-size:25px"> <a href="#">新型冠状病毒疫苗的保护作用持续时间是多久？后续还用再次接种加强免疫吗？
         </a><br>
         
         <span class="c-gap-right" >冯子健</span>
         <span  class="c-gap-right">中国疾病预防控制中心</span></li>
          <li style="font-size:25px"> <a href="#">哪些人可以接种国药中生北京所的新冠病毒灭活疫苗？
         </a><br>
         
         <span class="c-gap-right" >冯子健</span>
         <span  class="c-gap-right">中国疾病预防控制中心</span></li>
          <li style="font-size:25px"> <a href="#">国药中生北京所的新冠疫苗保护效力达79.34%，意味着什么？
         </a><br>
         
         <span class="c-gap-right" >冯子健</span>
         <span  class="c-gap-right">中国疾病预防控制中心</span></li>
          <li style="font-size:25px"> <a href="#">新冠疫苗的保护效力、抗体阳转率是什么意思？
         </a><br>
         
         <span class="c-gap-right" >冯子健</span>
         <span  class="c-gap-right">中国疾病预防控制中心</span></li>
          <li style="font-size:20px"> <a href="#">接种新冠疫苗后还需做核酸检测吗？接种证明能否替代核酸检测报告？
         </a><br>
         
         <span class="c-gap-right" >冯子健</span>
         <span  class="c-gap-right">中国疾病预防控制中心</span></li>
       
     </ul></div>
  
  </div>
</div>
<br>
<div class="wd">患者常见的问题
 <br>
    <ul style="font-size:15px"> 
      <li> <img src="./6.png"   height="40">目前有针对新型冠状病毒的疫苗吗？</li>
      <br>
      <li><img src="./8.png"   height="20">2020年12月31日，国务院联防联控机制发布，国药集团中国生物新冠灭活疫苗已获得国家药监局批准附条件上市。已有数据显示，保护率为79.34%，实现安全性、有效性、可及性、可负担性的统一，达到世界卫生组织及国家药监局相关标准要求。后续，疫苗免疫的持久性和保护效果还需持续观察。</li>
       <li> <img src="./6.png"   height="40">人感染新型冠状病毒后会有什么症状？</li>
       <br>
      <li><img src="./8.png"   height="20">人感染新型冠状病毒后的症状严重程度取决于病毒的类型以及人体的免疫水平，常见的有发热、咳嗽、呼吸急促或呼吸困难，更严重时会导致急性呼吸窘迫综合征、脓毒性休克等，可导致患者死亡。</li>
       <li> <img src="./6.png"   height="40">新型冠状病毒可以在人与人之间传播吗？</li>
       <br>
      <li><img src="./8.png"   height="20">是的，新型冠状病毒是可以在人与人之间传播的，传播通常发生在在家庭、工作场所、人群密集区域或医院等。</li>
     
    </ul></div>
    </div>
        
                 
    <!-- ---------------------------- -->
    <!-- 动画和扇形整体上台  里面样式先不改 -->
    <div class="xy">
       
           <div class="xy1"> 抗疫仍在路上~</div>
      <div class="wk" >
        <img src="./wk.png" alt="" />
      </div>
    
    
      <div class="bajie" >
        <img src="./bajie.png" alt="" />
      </div>
    
   
      <div class="ts" >
        <img src="./ts.png" alt="" />
      </div>
   
   
      <div class="ss" >
        <img src="./ss.png" alt="" />
      
    </div>
    <!-- 扇形图标的盒子 -->
    <div
      id="echart"
      style="height: 600px;  margin-top: -800px ;width:600px;float:right;margin-right:50px"
    ></div>
  </div>
     

  </div>
  
</template>
<style scoped>
.c-gap-right {
  font-size: 17px;
    margin-right: .8rem;
    color:gray;
    font-family: 楷体;
  
}
.xgz{
  width: 50%;
 height: 500px;
 /* background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20200228/f4c81c3d94b348fd817368e76ff606ba.jpeg);
 background-size: 100% 120%; */
 
}
.xgy{
  margin-top: -500px;
  float: right;
  height: 500px;
  width: 550px;
 /* background-color: plum; */
 color:#fff;
 /* background-image: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1657544937,942344358&fm=26&gp=0.jpg);
 background-size: 100% 120%;
 font-weight:10 */
 
}
* {
  margin: 0;
  padding: 0;
}
.wd{
  height: 300px;
  width: 100%;
  /* background-color: lightcoral; */
  font-size: x-large;
  font-family: 楷体;
  /* background-image: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1657544937,942344358&fm=26&gp=0.jpg);
 background-size: 100% 120%;
 font-weight:10 */
  
}
.xg{
  /* background-color: #6987ff; */
  height: 500px;
  width:100%;
/* background-image: url(http://5b0988e595225.cdn.sohucs.com/images/20200228/f4c81c3d94b348fd817368e76ff606ba.jpeg); */
  margin-top: 50px;
  color:#fff;
  font-weight:1000;
  /* background-size: 50% 50%; */
  
 background-size: 100% 120%;
}

.xg1{
  /* background-color: #6987ff; */
  height: 300px;
  width: 600px;
  float: right;
  margin-top: -1110px;
  margin-right: 20px;
  border-radius: 30px
}
.xgnr2{
  font-family: 黑体;
  text-align: center; 
  font-weight:800px;
  font-size:30px
}
.xy{
  float: right;
  margin-top:-1060px;
  /* background-color: aqua; */
  width: 800px;
  height: 200px;
  margin-right: -50px;
}
.xy1{
  font-size: 60px;
  color:white;
  margin-top: -80px;
  font-family: 黑体;
  text-align: center;
 
}
.header {
  position: relative;
  min-height: 2000px;
  padding-bottom: 31px;
  background-image: url(https://expertimg.cdn.bcebos.com/yidian%2Fa.png);
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  color: #fff;
  
}
.header1 {
  position: relative;
  width: 1115px;
  padding-top: 41px;
  height: 100%;
  margin: 0 auto;
  z-index: 1;
  font-size: 36px;
}
.header2 {
  font: 14px/22px Arial, Helvetica, sans-serif;
  font-weight: 500;
  line-height: 1;
  margin-top: 10px;
}
.tubiao {
  width: 156px;
  height: 30px;
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  float: right;
}
.ys1 {
  display: block;
  position: relative;
  font-size: 30px;

  width: 520px;
  height: 66.8px;
  float: left;
  margin-top: 20px;
}
.ys2 {
  font-size: 30px;

  width: 520px;
  height: 66.8px;
  display: inline;
  float: right;
  margin-top: 20px;
}
.ysn0 {
  margin-left: 50px;
  margin-top: -50px;
}
.ysn1 {
  font-size: 25px;
  font-weight: 500px;
  font-family: 楷体;
}
.ysn2 {
  width: 54px;
  color: #6987ff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 16px;
  display: inline-block;
  text-align: center;
  line-height: 12px;
  vertical-align: 10px;

  border-radius: 9px;
  background: hsla(0, 0%, 100%, 0.9);
  border: 1px solid;
  font-size: 10px;
}
.ysn3 {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 16px;
  display: inline-block;
  text-align: right;
  right: -10px;
  top: -8px;
  line-height: 12px;
  vertical-align: 1px;
  border-radius: 9px;
  background: hsla(0, 0%, 100%, 0.9);
  border: 1px solid;
  color: #02b7ca;
  font-size: 12px;
}
.ysn4 {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 16px;
  height: 16px;
  background-image: url(https://bkssl.bdimg.com/static/wiki-yidian/widget/disease/card/img/check-logo_3ff6a1c.png);

  background-size: 16px 16px;
}
/* 第二个医生 */
.qysn0 {
  margin-left: 50px;
  margin-top: -50px;
}
.qysn1 {
  font-size: 25px;
  font-weight: 500px;
  font-family: 楷体;
}
.qysn2 {
  width: 54px;
  color: #6987ff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 16px;
  display: inline-block;
  text-align: center;
  line-height: 12px;
  vertical-align: 10px;

  border-radius: 9px;
  background: hsla(0, 0%, 100%, 0.9);
  border: 1px solid;
  font-size: 10px;
}
.qysn3 {
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 16px;
  display: inline-block;
  text-align: right;
  right: -10px;
  top: -8px;
  line-height: 12px;
  vertical-align: 1px;
  border-radius: 9px;
  background: hsla(0, 0%, 100%, 0.9);
  border: 1px solid;
  color: #02b7ca;
  font-size: 12px;
}
.qysn4 {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 16px;
  height: 16px;
  background-image: url(https://bkssl.bdimg.com/static/wiki-yidian/widget/disease/card/img/check-logo_3ff6a1c.png);

  background-size: 16px 16px;
}
.jj {
  margin-left: 150px;
  font-size: 50px;
}
.zz{
  margin-left: 80px;
  font-size: 50px;
  color:white;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(n) {
  background-image: url(1.jpg);
}

.el-carousel__item:nth-child(2n + 1) {
  background-image: url(2.jpg);
}
.el-carousel__item:nth-child(3n + 1) {
  background-image: url(3.jpg);
}
.el-carousel__item:nth-child(4n + 1) {
  background-image: url(4.jpg);
}

.wk {
    width: 200px;
    height: 180px;
   margin-left: 70px;
    overflow: hidden;
    float: left;
}
.wk img {
    height: 180px;
    animation: wk_move 1s infinite steps(8) ;
}
@keyframes wk_move {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: -1600px;
    }
}
.bajie {
        width: 200px;
        height: 180px;
       margin-right: -50px;
        float: left;
        overflow: hidden;
       
        
    }
    .bajie img {
        height: 180px;
        animation: bajie_move 1s infinite steps(8) ;
    }
    @keyframes bajie_move {
        from {
            margin-left: 0px;
        }
        to {
            margin-left: -1600px;
        }
    }
    .ts {
        /* 图片在网页上的大小 */
        width: 170px;
        height: 240px;
       margin-top:-23px;
       margin-right: -20px;
        float: left;
        overflow: hidden;
            
    
}

    .ts img {
        height: 240px;
        
        animation: ts_move 1s infinite steps(8) ;
    }
    @keyframes ts_move {
        from {
            margin-left: 0px;
        }
        to {
            /* 图片时机大小 */
            margin-left: -1360px;
        }
    }
    .ss {
        width: 200px;
        height: 180px;
        
        float: left;
        overflow: hidden;
       
        
    }
    .ss img {
        height: 191px;
        animation: ss_move 1s infinite steps(8) ;
    }
    @keyframes ss_move {
        from {
            margin-left: 0px;
        }
        to {
            margin-left: -1600px;
        }
    }
</style>

<script>

import { mapActions,mapState} from "vuex";
export default {
  
  //将分页查询的疫情数据的前十条显示到折现图中
  //x轴显示省份，y轴显示确诊人数
  destroyed() {
    clearInterval(this.timer);
  },
  data() {
    return {
      timer: 0,
      activeIndex2:'0',
       tags: [
          { name: '发热症状', type: '' },
          { name: '腹泻症状', type: 'success' },
          { name: '呼吸困难', type: 'info' },
          { name: '有并发症', type: 'warning' },
          { name: '器官衰竭', type: 'danger' }
        ]
       //动画
    };
  },
  computed: {
    ...mapState("data_list", ["dataList"]),
  },
  created() {
    this.timer = setInterval(() => {
      this.findData();
    }, 2000);
  },
  methods: {
    ...mapActions("data_list", ["page_query"]),
    handleSelect(){},  //动画的方法
    findData() {
      this.page_query({
        page: 1,
        pageSize: 10,
      }).then(() => {
        let res1 = this.dataList.list.map((item) => {
          return item.province;
        });
        let res2 = this.dataList.list.map((item) => {
          return item.confirmed;
        });
        //把两个数组变成对象  传给饼图
        let result = [];
        for(let index in res1){
          result.push({value: res2[index], name: res1[index]});

        }
        this.initEchart(result);
        
      });
      
    },
    //初始化图表
    initEchart(result) {
      echarts.init(document.getElementById("echart")).dispose();
      var myChart = echarts.init(document.getElementById("echart"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "各城市感染者人数统计",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        visualMap: {
          show: false,
          min: 0,
          max: 50,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            name: "echart",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data:result.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(255, 255, 255, 0.9)",
            },
            labelLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.9)",
              },
              smooth: 0.2,
              length: 10,
              length2: 20,
            },
            itemStyle: {
              shadowBlur: 200,
              shadowColor: "red",
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },

};

</script>